<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>资源管理_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
</head>
<body>
<div style="padding: 20px">
    <span class="layui-breadcrumb">
        <a>首页</a>
        <a><cite>资源管理</cite></a>
    </span>
    <div style="padding-top: 20px;">
        <div class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">资源名称：</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" placeholder="请输入" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">作者：</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" placeholder="请输入" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">审核状态：</label>
                <div class="layui-input-inline">
                    <select id="checkStatus" name="checkStatus">
                        <option value="">请选择审核状态</option>
                        <option value="1">未审核</option>
                        <option value="2">审核通过</option>
                        <option value="3">审核未通过</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 20px;">
                <button class="layui-btn layuiadmin-btn-list" lay-submit="" lay-filter="*">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
        <table width="100%" id="resListTable" lay-filter="resListTable"></table>
    </div>
</div>

<script type="text/html" id="toolbarTpl">
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</script>
<script type="text/html" id="toolTpl">
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
    <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script type="text/html" id="hotSwitchTpl">
    {{#  if(d.hot){ }}
    <input type="checkbox" name="{{d.id}}" value="{{d.hot}}" lay-skin="switch" lay-filter="hotSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;" checked="checked"/>
    {{#  } else { }}
    <input type="checkbox" name="{{d.id}}" value="{{d.hot}}" lay-skin="switch" lay-filter="hotSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;"/>
    {{#  } }}
</script>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    let $, layer, table;
    layui.use(['layer', 'form', 'table'], function () {
        $ = layui.jquery,
            layer = layui.layer,
            table = layui.table;
        let form = layui.form;

        table.render({
            elem: '#resListTable',
            toolbar: '#toolbarTpl',
            url: '/admin/res/list',
            limit: 30,
            headers: {'Cache-Control':'no-cache'},
            cols: [[
                {type: 'checkbox'},
                {field: 'name', title: '资源名称', templet: formatName},
                {field: 'resType', width: 100, title: '所属类别', templet: formatResTypeName},
                {field: 'user', width: 100, title: '作者', templet: formatUsername},
                {field: 'points', width: 60, title: '积分', align: 'center'},
                {field: 'publishDate', width: 120, title: '发布日期', sort: true, align: 'center'},
                {field: 'checkStatus', width: 100, title: '审核状态', align: 'center', templet: formatCheckStatus},
                {field: 'hot', title: '热门资源?', width: 100, templet: '#hotSwitchTpl', unresize: true},
                {field: 'action', width: 150, title: '操作', align: 'center', templet: '#toolTpl'}
            ]],
            page: true
        });

        $("#name, #checkStatus, #username").on("keydown", function (e) {
            if (e.key === 'Enter') {
                search();
            }
        });

        // 触发工具栏事件
        table.on('toolbar(resListTable)', function (obj) {
            switch (obj.event) {
                case 'delete': // 删除
                    deleteSelected();
                    break;
            }
        });

        // 触发单元格工具事件
        table.on('tool(resListTable)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit': // 编辑
                    location.href = "/admin/res/edit/" + data.id;
                    break;
                case 'delete': // 删除
                    deleteOne(data.id);
                    break;
                case 'check': // 审核状态
                    location.href = "/admin/res/check/" + data.id;
                    break;
            }
        });

        // 监听提交
        form.on('submit(*)', function (data) {
            search();
        });

        // 监听热门操作
        form.on('switch(hotSwitch)', function (obj) {
            $.post("/admin/res/updateHotStatus", {"id": this.name, "hot": obj.elem.checked}, function (result) {
                if (result.success) {
                    layer.msg("执行成功！");
                    table.reload("resListTable", {});
                } else {
                    layer.msg("执行失败，请联系管理员！");
                }
            }, "json");
        });
    });

    function search() {
        table.reload("resListTable", {
            page: {
                curr: 1
            },
            where: {
                name: $("#name").val(),
                checkStatus: $("#checkStatus").val(),
                'user.username': $("#username").val()
            }
        });
    }

    function formatName(d) {
        if (d.checkStatus == 2) {
            return "<a href='/res/detail/" + d.id + "' target='_blank'>" + d.name + "</a>";
        } else {
            return d.name;
        }
    }

    function formatResTypeName(d) {
        if (d.resType == null) {
            return "";
        } else {
            return d.resType.name;
        }
    }

    function formatUsername(d) {
        if (d.user == null) {
            return "";
        } else {
            return d.user.username;
        }
    }

    function formatCheckStatus(d) {
        if (d.checkStatus == 1) {
            return "<button class='layui-btn layui-btn-danger layui-btn-xs' lay-event='check'><i class='layui-icon layui-icon-edit'></i>待审核</button>";
        } else if (d.checkStatus == 2) {
            return "<label style='color: blue;'>审核通过</label>";
        } else if (d.checkStatus == 3) {
            return "<a href='#' title='审核未通过原因：" + d.reason + "''><label style='color: red;'>审核未通过</label></a><br/>";
        }
    }

    function deleteOne(id) {
        layer.confirm('您确定要删除这条记录吗？', {
            title: "系统提示",
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll('dialog');
            $.post("/admin/res/delete", {"id": id}, function (result) {
                if (result.success) {
                    layer.msg("删除成功！");
                    table.reload("resListTable", {});
                } else {
                    layer.msg("删除失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }

    function deleteSelected() {
        let checkStatus = table.checkStatus('resListTable');
        if (checkStatus.data.length == 0) {
            layer.msg("请选择要删除的数据！");
            return;
        }
        let strIds = [];
        let rows = checkStatus.data;
        for (var i = 0; i < checkStatus.data.length; i++) {
            strIds.push(rows[i].id);
        }
        var ids = strIds.join(",");
        layer.confirm('您确定要删除这<label style="color: red;">' + checkStatus.data.length + '</label>条记录吗？', {
            title: '系统提示',
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll('dialog');
            $.post("/admin/res/deleteBatch", {"ids": ids}, function (result) {
                if (result.success) {
                    layer.msg("删除成功！");
                    table.reload("resListTable", {});
                } else {
                    layer.msg("删除失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }
    /*]]>*/
</script>
</body>
</html>